<template>
  <el-dialog
    title="图标选择"
    width="900px"
    top="60px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
    :visible="dialogVisible"
    class="icon-select-dialog"
    @close="close"
  >
    <div class="icon-content yScroll">
      <d2-scrollbar>
        <el-row class="m0">
          <el-col v-for="(item, index) in iconArr" :key="index" :span="4">
            <div class="icon-wrapper fcc" @click="iconClick(item)">
              <i
                class="icon iconfont dialog-icon fz24 pointer"
                :class="[item, item === activeIcon ? 'is-active' : '']"
              ></i>
            </div>
          </el-col>
        </el-row>
      </d2-scrollbar>
    </div>

    <span slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="submitData">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import dialogMixin from "mixins/dialogMixin";
import Iconfont from "@/assets/iconfont/iconfont.json";

export default {
  mixins: [dialogMixin],
  props: {
    // 当前设置的icon
    currentIcon: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      iconArr: [],
      // 选中的图标
      activeIcon: "",
    };
  },
  created() {},
  methods: {
    /**
     * 初始化
     */
    initForm() {
      this.activeIcon = this.currentIcon;
      this.setIconList();
    },
    /**
     * 图标点击事件
     */
    iconClick(item) {
      this.activeIcon = item === this.activeIcon ? "" : item;
    },
    /**
     * 提交事件
     */
    async submitData() {
      if (!this.activeIcon) {
        return this.$message.error("请选择一个图标");
      }
      this.$emit("success", { icon: this.activeIcon });
      this.close();
    },
    /**
     * 设置图表列表
     */
    setIconList() {
      const { css_prefix_text, glyphs } = Iconfont;
      this.iconArr = glyphs.map((item) => `${css_prefix_text}${item.font_class}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.icon-select-dialog {
  .icon-content {
    min-height: 120px;
    height: calc(100vh - 260px);
    .icon-wrapper {
      height: 60px;
      .dialog-icon {
        transition: all 0.3s linear;
        &:hover {
          transform: scale(1.5);
          color: #000;
          font-weight: bold;
        }
        &.is-active {
          color: #409eff;
        }
      }
    }
  }
}
</style>
